<template>
  <div
    class="control-wrap"
    :class="[{ 'full-height': fullHeight }, customClass]"
    :style="customStyle"
  >
    <slot />
  </div>
</template>

<script setup>
import { computed } from "vue";
const props = defineProps({
  fullHeight: { type: Boolean, default: false }, // true: 100%高度，false: 自适应
  customClass: { type: String, default: "" }, // 支持自定义class
  customStyle: { type: [String, Object], default: "" }, // 支持自定义style
});
</script>

<style lang="scss" scoped>
.control-wrap {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 16px 0 rgba(91, 140, 255, 0.06);
  padding: 24px;
  transition: box-shadow 0.2s;
  min-height: 400px;
  position: relative;
  overflow: auto;

  // 响应式
  @media (max-width: 768px) {
    padding: 12px;
    border-radius: 8px;
  }
}
.full-height {
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  @include scroll-bar(6px, #b3b3b3);
}
</style>
